<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p id="msg">{{message}}</p>
        <p><button type="button" @click="message += '2024'">按钮</button></p>
    </div>
    <script src="./assets/vue.js"></script>
    <script>
        /**
         * 生命周期：Vue对象的生命周期
         *          Vue对象从创建到销毁的过程...
         * 生命周期钩子：一种函数，在Vue对象从创建到销毁的过程中一些特殊的位置点
         *             每一个位置点都对应一个函数，当生命周期执行到此处时，钩子函数会自动执行
         * 
         */ 
        let vm = new Vue({
            // el: '#app',
            data: {
                message: 'hello vuejs'
            },
            methods: {
                fn() {
                    console.log('我的函数...');
                }
            },
            /**
             * 生命周期钩子
             * beforeCreate, created, beforeMount, mounted, beforeDestroy, destroyed
             * 此六个函数在生命周期中仅会执行一次
             * beforeUpdate, updated 会多次执行
             */
            // 初始化阶段
            beforeCreate() {
                // 此时Vue对象已经创建，但是data数据与methods函数没有初始化
                // 配置中的data与methods还没有挂载到Vue对象上，通过this无法使用
                console.log('beforeCreate', this.message);
                // this.fn();
            },
            created() {
                // 此时data数据与methods函数已经挂载到Vue对象上，通过this可以访问
                console.log('created', this.message);
                this.fn();
            },
            // 模板解析阶段：vue会解析页面上使用插值和指令
            beforeMount() {
                // 此时页面模板还未解析，在页面上仍然是原始的指令或插值
                let dom = document.getElementById('msg');
                console.log('beforeMount', dom.innerHTML);
            },
            mounted() {
                // 此时页面模板已经被解析，在页面上的指令或插值已经被替换称为具体的数据值
                let dom = document.getElementById('msg');
                console.log('mounted', dom.innerHTML);
            },
            // 页面运行期间: 当data数据变化，需重新渲染页面时
            beforeUpdate() {
                // 数据已经发生变化，但是页面还没有重新渲染
                let dom = document.getElementById('msg');
                console.log('beforeUpdate-html', dom.innerHTML);
                console.log('beforeUpdate-data', this.message);
            },
            updated() {
                // 数据已经发生变化，而且页面也重新渲染完成
                let dom = document.getElementById('msg');
                console.log('updated-html', dom.innerHTML);
                console.log('updated-data', this.message);
            },
            // 销毁阶段
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            }
        });

        vm.$mount('#app');//等同于vm.$el = '#app';初始化时的el选项，即将Vue对象挂载到页面上

        setTimeout(function() {
            vm.$destroy();
        }, 3000);
    </script>
</body>
</html>